<template>
  <div id="provinceline">
    <!-- 分数相近院校推荐 -->
    <div class="recommend">
      <h2>分数相近院校推荐</h2>
      <div class="info">
        <span>根据<span>2020</span></span>
        <span>{{ infoForm.type }}</span>
        <span>普通类 录取分数为基准</span>
      </div>
      <el-card>
        <div
          class="right_item"
          v-for="(item, index) in recomCollegeList"
          :key="index"
          @mouseover="changeBig(index)"
        >
          <div
            class="image"
            :style="{ width: change !== index ? '20px' : '50px' }"
          >
            <img :src="item.logo" alt="" />
          </div>
          <div class="info">
            <div
              class="infoName"
              @click="replace(item.unvid)"
              :style="{ fontSize: change !== index ? '14px' : '16px' }"
            >
              <span>{{ item.name }}</span>
            </div>
            <span
              :style="{ display: change !== index ? 'none' : 'block' }"
              class="infoBottom"
            >
              <span>{{ item.type }}</span>
              <span>{{ item.admissionBatch }} </span>
              <span
                ><span>{{ item.score }}</span
                >分</span
              >
            </span>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 分数线 -->
    <div class="line">
      <h2>分数线</h2>
      <div class="choose">
        <el-form :inline="true" :model="infoForm" class="demo-form-inline">
          <el-form-item>
            <el-select
              v-model="infoForm.batch"
              placeholder="请选择批次"
              style="width: 120px"
              @change="changeLineBatch"
            >
              <el-option
                v-for="(item, index) in batchList"
                :label="item.value"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="infoForm.type"
              placeholder="请选择文理科"
              style="width: 150px"
              @change="changeLineType"
            >
              <el-option
                v-for="(item, index) in typeList"
                :label="item.value"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-card>
        <el-table :data="lineData" stripe border style="width: 100%">
          <el-table-column
            align="center"
            label="年份"
            width="150"
            prop="year"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.timeYear }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="录取批次"
            width="200"
            prop="formType"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.admissionBatch }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="最低分 / 最低位次"
            width="280"
            prop="score"
            align="center"
          >
            <template slot-scope="scope">
              <span class="score">{{ scope.row.score }}</span>
              /
              <span class="rank">{{ scope.row.rank }}</span>
            </template>
          </el-table-column>

          <el-table-column label="省控线" prop="proScore" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.proScore }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 招生计划 -->
    <div class="plan">
      <h2>招生计划</h2>
      <div class="choose">
        <el-form :inline="true" :model="planInfoForm" class="demo-form-inline">
          <el-form-item>
            <el-select
              v-model="planInfoForm.year"
              placeholder="请选择年份"
              style="width: 120px"
              @change="changePlanYear"
            >
              <el-option
                v-for="(item, index) in yearList1"
                :label="item.value"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="planInfoForm.type"
              placeholder="请选择文理科"
              style="width: 130px"
              @change="changePlanType"
            >
              <el-option
                v-for="(item, index) in typeList"
                :label="item.value"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="planInfoForm.batch"
              placeholder="请选择录取批次"
              style="width: 150px"
              @change="changePlanFormType"
            >
              <el-option
                v-for="(item, index) in formTypeList"
                :label="item.value"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-card>
        <el-table :data="planData" stripe border style="width: 100%">
          <el-table-column
            align="center"
            label="专业名称"
            width="360"
            prop="name"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="计划招生"
            width="150"
            prop="num"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="学制" width="150" prop="year" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.length }}</span>
            </template>
          </el-table-column>
          <el-table-column label="学费" prop="tuition" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.tuition }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-pagination
        class="pagination"
        @current-change="handleCurrentChange2"
        :current-page="pagination2.page"
        :page-size="pagination2.size"
        layout="total, prev, pager, next"
        :total="pagination2.count"
      >
      </el-pagination>
    </div>
    <!-- 专业分数线 -->
    <div class="majorLine">
      <h2>专业分数线</h2>
      <div class="choose">
        <el-form :inline="true" :model="majorLineList" class="demo-form-inline">
          <el-form-item>
            <el-select
              v-model="majorLineList.year"
              placeholder="请选择年份"
              style="width: 120px"
              @change="changeMajorLineYear"
            >
              <el-option
                v-for="(item, index) in yearList"
                :label="item.value"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="majorLineList.type"
              placeholder="请选择文理科"
              style="width: 150px"
              @change="changeMajorLineType"
            >
              <el-option
                v-for="(item, index) in typeList"
                :label="item.value"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="majorLineList.batch"
              placeholder="请选择录取批次"
              style="width: 150px"
              @change="changeMajorLineBatch"
            >
              <el-option
                v-for="(item, index) in formTypeList"
                :label="item.value"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-card>
        <el-table :data="majorLineData" stripe border style="width: 100%">
          <el-table-column
            align="center"
            label="专业名称"
            prop="name"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="录取批次"
            width="150"
            prop="formType"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.batch }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="平均分"
            width="122"
            prop="average"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.average }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="最低分 / 最低位次"
            width="202"
            prop="minScore"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.minScore }}</span> /
              <span>{{ scope.row.minSection }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-pagination
        class="pagination"
        @current-change="handleCurrentChange3"
        :current-page="pagination3.page"
        :page-size="pagination3.size"
        layout="total, prev, pager, next"
        :total="pagination3.count"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  name: "provinceline",
  data() {
    return {
      // 放大
      change: 0,
      recomCollegeList: [],
      //初始分页条件
      pagination2: {
        page: 1,
        count: 1,
        size: 5,
      },
      pagination3: {
        page: 1,
        count: 1,
        size: 5,
      },
      // 信息选择
      infoForm: {
        batch: "",
        type: "",
      },
      batchList: [
        {
          value: "本科一批",
        },
        {
          value: "本科二批",
        },
        {
          value: "高职专科批",
        },
      ],
      yearList: [
        {
          value: "2020",
        },
        {
          value: "2019",
        },
        {
          value: "2018",
        },
        {
          value: "2017",
        },
        {
          value: "2016",
        },
      ],
      yearList1: [
        {
          value: "2021",
        },
        {
          value: "2020",
        },
        {
          value: "2019",
        },
        {
          value: "2018",
        },
        {
          value: "2017",
        },
        {
          value: "2016",
        },
      ],
      typeList: [
        {
          value: "理科",
        },
        {
          value: "文科",
        },
      ],
      formTypeList: [
        {
          value: "本科一批",
        },
        {
          value: "本科二批",
        },
        {
          value: "高职专科批",
        },
      ],
      // 第二 选择
      planInfoForm: {
        year: "",
        batch: "",
        type: "",
      },
      // 第三 选择
      majorLineList: {
        year: "",
        batch: "",
        type: "",
      },
      // 分数线数据
      lineData: [],
      // 招生计划数据
      planData: [],
      // 专业分数线数据
      majorLineData: [],
    };
  },
  methods: {
    // 分页
    handleCurrentChange2(page) {
      this.pagination2.page = page;
      this.$axios
        .post(
          "/universityPlan",
          qs.stringify({
            unvId: this.$route.params.id,
            year: this.planInfoForm.year,
            type: this.planInfoForm.type,
            batch: this.planInfoForm.batch,
            page: this.pagination2.page,
            size: this.pagination2.size,
          })
        )
        .then((res) => {
          this.planData = res.data.listPlan;
          this.pagination2.count = res.data.total;
        });
    },
    handleCurrentChange3(page) {
      this.pagination3.page = page;
      this.$axios
        .post(
          "/universityMajorScore",
          qs.stringify({
            unvId: this.$route.params.id,
            year: this.majorLineList.year,
            type: this.majorLineList.type,
            batch: this.majorLineList.batch,
            page: this.pagination3.page,
            size: this.pagination3.size,
          })
        )
        .then((res) => {
          this.majorLineData = res.data.list;
          this.pagination3.count = res.data.total;
        });
      console.log("跳转了");
    },
    // 分数线 修改年份
    changeLineBatch() {
      this.$axios
        .get(
          "/universityScore/" +
            this.$route.params.id +
            "/" +
            this.infoForm.batch +
            "/" +
            this.infoForm.type
        )
        .then((res) => {
          console.log(res);
          this.lineData = res.data;
        });
      this.$axios
        .post(
          "/similarUniversity",
          qs.stringify({
            unvId: this.$route.params.id,
            year: 2020,
            type: this.infoForm.type,
          })
        )
        .then((res) => {
          console.log(res);
          this.recomCollegeList = res.data;
        });
    },
    // 手风琴
    changeBig(index) {
      this.change = index;
      console.log(this.change);
    },
    // 分数线 修改文理科
    changeLineType() {
      this.$axios
        .get(
          "/universityScore/" +
            this.$route.params.id +
            "/" +
            this.infoForm.batch +
            "/" +
            this.infoForm.type
        )
        .then((res) => {
          console.log(res);
          this.lineData = res.data;
        });
      this.$axios
        .post(
          "/similarUniversity",
          qs.stringify({
            unvId: this.$route.params.id,
            year: 2020,
            type: this.infoForm.type,
          })
        )
        .then((res) => {
          console.log(res);
          this.recomCollegeList = res.data;
        });
    },
    // 招生计划 修改年份
    changePlanYear() {
      this.$axios
        .post(
          "/universityPlan",
          qs.stringify({
            unvId: this.$route.params.id,
            year: this.planInfoForm.year,
            type: this.planInfoForm.type,
            batch: this.planInfoForm.batch,
            page: this.pagination2.page,
            size: this.pagination2.size,
          })
        )
        .then((res) => {
          console.log(res);
          this.planData = res.data.listPlan;
          this.pagination2.count = res.data.total;
        });
    },
    changePlanType() {
      this.$axios
        .post(
          "/universityPlan",
          qs.stringify({
            unvId: this.$route.params.id,
            year: this.planInfoForm.year,
            type: this.planInfoForm.type,
            batch: this.planInfoForm.batch,
            page: this.pagination2.page,
            size: this.pagination2.size,
          })
        )
        .then((res) => {
          console.log(res);
          this.planData = res.data.listPlan;
          this.pagination2.count = res.data.total;
        });
    },
    changePlanFormType() {
      this.$axios
        .post(
          "/universityPlan",
          qs.stringify({
            unvId: this.$route.params.id,
            year: this.planInfoForm.year,
            type: this.planInfoForm.type,
            batch: this.planInfoForm.batch,
            page: this.pagination2.page,
            size: this.pagination2.size,
          })
        )
        .then((res) => {
          console.log(res);
          this.planData = res.data.listPlan;
          this.pagination2.count = res.data.total;
        });
    },
    // 专业分数线
    changeMajorLineYear() {
      this.$axios
        .post(
          "/universityMajorScore",
          qs.stringify({
            unvId: this.$route.params.id,
            year: this.majorLineList.year,
            type: this.majorLineList.type,
            batch: this.majorLineList.batch,
            page: this.pagination3.page,
            size: this.pagination3.size,
          })
        )
        .then((res) => {
          console.log(res);
          this.majorLineData = res.data.list;
          this.pagination3.count = res.data.total;
        });
    },
    changeMajorLineType() {
      this.$axios
        .post(
          "/universityMajorScore",
          qs.stringify({
            unvId: this.$route.params.id,
            year: this.majorLineList.year,
            type: this.majorLineList.type,
            batch: this.majorLineList.batch,
            page: this.pagination3.page,
            size: this.pagination3.size,
          })
        )
        .then((res) => {
          console.log(res);
          this.majorLineData = res.data.list;
          this.pagination3.count = res.data.total;
        });
    },
    changeMajorLineBatch() {
      this.$axios
        .post(
          "/universityMajorScore",
          qs.stringify({
            unvId: this.$route.params.id,
            year: this.majorLineList.year,
            type: this.majorLineList.type,
            batch: this.majorLineList.batch,
            page: this.pagination3.page,
            size: this.pagination3.size,
          })
        )
        .then((res) => {
          console.log(res);
          this.majorLineData = res.data.list;
          this.pagination3.count = res.data.total;
        });
    },
  },
  created() {
    this.infoForm.batch = this.batchList[0].value;
    this.infoForm.type = this.typeList[0].value;
    this.planInfoForm.year = this.yearList1[0].value;
    this.planInfoForm.type = this.typeList[0].value;
    this.planInfoForm.batch = this.formTypeList[0].value;
    this.majorLineList.year = this.yearList[0].value;
    this.majorLineList.type = this.typeList[0].value;
    this.majorLineList.batch = this.formTypeList[0].value;
    this.$axios
      .get(
        "/universityScore/" +
          this.$route.params.id +
          "/" +
          this.infoForm.batch +
          "/" +
          this.infoForm.type
      )
      .then((res) => {
        console.log(res);
        this.lineData = res.data;
      });
    this.$axios
      .post(
        "/universityPlan",
        qs.stringify({
          page: this.pagination2.page,
          size: this.pagination2.size,
          unvId: this.$route.params.id,
          year: this.planInfoForm.year,
          type: this.planInfoForm.type,
          batch: this.planInfoForm.batch,
        })
      )
      .then((res) => {
        this.planData = res.data.listPlan;
        this.pagination2.count = res.data.total;
        console.log("这是招生计划", res);
      });
    this.$axios
      .post(
        "/universityMajorScore",
        qs.stringify({
          page: this.pagination3.page,
          size: this.pagination3.size,
          unvId: this.$route.params.id,
          year: this.majorLineList.year,
          type: this.majorLineList.type,
          batch: this.majorLineList.batch,
        })
      )
      .then((res) => {
        console.log("这是专业分数线", res);
        this.majorLineData = res.data.list;
        this.pagination3.count = res.data.total;
      });
    this.$axios
      .post(
        "/similarUniversity",
        qs.stringify({
          unvId: this.$route.params.id,
          year: 2020,
          type: this.infoForm.type,
        })
      )
      .then((res) => {
        console.log(res);
        this.recomCollegeList = res.data;
      });
  },
};
</script>

<style scoped>
h2 {
  font-size: 20px;
  font-weight: 700;
}

.score {
  color: rgba(236, 0, 0);
}

.rank {
  color: rgba(0, 165, 38);
}

.line,
.plan,
.majorLine {
  position: relative;
  margin-top: 1.6vh;
  width: 70%;
  left: 0;
}

.line {
  min-height: 48.8vh;
}

.plan {
  top: 2.5vh;
}

.majorLine {
  top: 1.5vh;
}

.recommend {
  float: right;
  position: relative;
  width: 30%;
  min-height: 32.5vh;
  right: 0;
}

.recommend h2 {
  margin-bottom: 1.6vh;
  margin-left: 0.7vw;
}

.recommend .info {
  margin-bottom: 1.6vh;
}

.recommend /deep/ .el-card {
  margin-top: 0.7vh;
}

.plan,
.majorLine {
  min-height: 65vh;
}

.line h2,
.plan h2,
.majorLine h2 {
  position: absolute;
  display: inline-block;
  margin-left: 2.2vw;
  width: 8.9vw;
  height: 4.9vh;
  line-height: 4.9vh;
}

.line .choose,
.plan .choose,
.majorLine .choose {
  position: absolute;
  right: 0.4vw;
  display: inline-block;
  width: auto;
  height: 8.1vh;
  line-height: 8.1vh;
}

.line .el-card,
.plan .el-card,
.majorLine .el-card {
  width: 96%;
  top: 8.1vh;
  left: 1.5vw;
  position: absolute;
}

.line .el-pagination,
.plan .el-pagination,
.majorLine .el-pagination {
  position: absolute;
  bottom: 1.6vh;
  right: 1.9vw;
}

.right_item {
  width: 20.8vw;
  display: flex;
  margin-bottom: 3.3vh;
}

.image {
  width: 3.7vw;
}
.image img {
  width: 100%;
}

.info {
  margin-left: 0.7vw;
}

.info {
  margin-bottom: 0.8vh;
}

.infoName:hover {
  color: rgba(255, 101, 0);
  cursor: pointer;
}

.infoBottom {
  margin-top: 1.3vh;
  font-size: 14px;
  color: rgba(255, 101, 0);
}
</style>